<template>
	<div>
		<!-- 卡片视图 -->
		<el-card :body-style="{ padding: '0px' }">
			<el-header  height="50px" >
				<el-menu
				  :default-active="activeIndex"
				  router
				  class="el-menu-demo"
				  mode="horizontal"
				  @select="handleSelect"
				  background-color="#545c64"
				  text-color="#fff"
				  active-text-color="#ffd04b"
				  >
				  <el-menu-item index="1" class="el-icon-s-home"  @click="$router.push('/')">首页</el-menu-item>
				  <el-menu-item index="2" @click="$router.push('/Add')">添加表单</el-menu-item>
				  <el-menu-item index="3" @click="$router.push('FormList')">查看表单</el-menu-item>
				  <el-menu-item index="4" @click="$router.push('/CollectList')">收藏表单</el-menu-item>
				</el-menu> 
			</el-header>
			<div class="content" id="vue" v-cloak>
				<div style="background: #cdcfd0;min-height: calc(100vh - 10px); padding: 10px;">
					<div class="flex-row">
						<!-- 问卷左侧 -->
						<div class="well-box" style="width: 170px;margin-right: 10px">
							<div style="input-group-fan text-left">
								<!-- 表格数据 -->
								<el-table :data="FormList" height="450"border style="width: 100%">
									<!-- <el-table-column prop="startDate" label="开始日期" width="100">
									</el-table-column>
									<el-table-column prop="endDate" label="截止日期" width="100">
									</el-table-column> -->
									<el-table-column prop="headline" label="表名" width="100">
									</el-table-column>
									<!-- <el-table-column prop="formId" label="表单ID" width="70">
									</el-table-column> -->
									<el-table-column label="操作" width="50">
										<template slot-scope="scope">
											<el-button  icon="el-icon-view" size="mini" @click="handleSee(scope.row.formId)"circle></el-button>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</div>
						<!-- 问卷左侧 end -->
						<!-- 问卷右侧 -->

						<div class=" flex-1">
							<form action="#" method="post">
								<div class="well-box">
									<div class="input-group-fan text-left">
										<input name="title" type="text" v-model="Form.headline" class="form-control" />
									</div>
									<div class="input-group-fan text-left">
									<el-button size="mini"type="warning"@click="goStatisticsPage">统计</el-button>
									<el-button size="mini" type="danger" @click="handleDelete(Form.formId)">删除</el-button>
									<el-button size="mini" type="primary" @click="handleUpgrade(Form)">修改</el-button>
									<el-button size='mini' type="primary" icon="el-icon-share" @click="dialogVisible = true"></el-button>
									<el-button size="mini" type="success"  @click="onCollection(Form.formId,Form.state)">收藏</el-button>
									<el-dialog
									  title="提示"
									  :visible.sync="dialogVisible"
									  width="30%"
									  >
									  <span>http://120.79.19.249/#/FillForm/{{Form.formId}}</span>
									  <el-button size="mini" type="primary" @click="gotoFillForm(Form.formId)">跳转链接</el-button>
									      <vue-qr ref="Qrcode" 
									              :text="dataObj.text" 
									              :logoSrc="dataObj.logo" 
									              ></vue-qr>
									  <span slot="footer" class="dialog-footer">
									    <el-button @click="dialogVisible = false">取 消</el-button>
									    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
									  </span>
									</el-dialog>
									</div>
									
								</div>
								<!-- 问题集合为空时提示添加题型 end -->
								<div v-show="list.length == 0">
									<div class="questionnaire_null flex-row flex-center flex-middle">
										请从左边选择题型
									</div>
								</div>
								<!-- 问题集合为空时提示添加题型 end -->
								<div v-show="list.length != 0">
									<div class="well-box mt-1 text-left" :class="'questionnaire_'+index" v-for="(item, index) in list" :key="index">
										<!-- 操作按钮 增加 复制 删除 -->
										<div class="text-right">
											<el-button class="iconfont f28 pointer icon-jia" icon="el-icon-plus" circle size="mini" @click="addQuestionnaire(item.type,index)"></el-button>
											<el-button class="iconfont f28 pointer icon-fuzhi" icon="el-icon-document-copy" circle size="small" @click="addQuestionnaire(item.type,index,'copy')"></el-button>
											<el-button class="iconfont f28 pointer icon-shanchu" circle size="mini" icon="el-icon-delete" @click="delQuestionnaire(index)"></el-button>
										</div>
										<!-- 操作按钮 增加 复制 删除 end -->
										<div class="flex-row">
											<div style="width: 50px;padding:5px 10px;font-size: 14px">
												{{ index + 1 }}
											</div>
											<div class="flex-1">
												<input class="input-border notopmargin" type="text" v-model="item.questionContent" placeholder="请输入标题" />
												<div>
													<!-- 判断为单选题型 -->
													<div v-if="'singleChoice' == item.type" v-for="(optionsItem,i) in item.options" :key="i">
														<input type="radio" :name='"optionschoice["+index+"]"' />
														<input class="input-border" type="text" v-model="item.options[i].optionContent" />
								
														<el-button class="iconfont f28 pointer icon-jia" icon="el-icon-plus" circle size="mini" @click='addAanwer("radio",index,i)'></el-button>
														<el-button class="iconfont f28 pointer icon-shanchu" circle size="mini" icon="el-icon-delete" @click='delAanwer("radio",index,i)'></el-button>
													</div>
													<!-- 判断为单选题型 end -->
								
													<!-- 判断为多选题型 -->
													<div v-if="'mutipleChoice' == item.type" v-for="(optionsItem,i) in item.options" :key="i">
														<input type="checkbox" name="options" />
														<input class="input-border" type="text" v-model="item.options[i].optionContent" />
								
														<el-button class="iconfont f28 pointer icon-jia" icon="el-icon-plus" circle size="mini" @click='addAanwer("checkbox",index,i)'></el-button>
														<el-button class="iconfont f28 pointer icon-shanchu" circle size="mini" icon="el-icon-delete" @click='delAanwer("checkbox",index,i)'></el-button>
													</div>
													<!-- 判断为多选题型 end -->
								
													<!-- 判断为简答题型 -->
													<div v-if="'scoring' == item.type" v-for="(optionsItem,i) in item.options" :key="i">
														<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="item.options[i].optionContent">
														</el-input>
													</div>
								
													<!-- 判断为简答型 end -->
												</div>
											</div>
										</div>
									</div>
								</div>
							</form>
						</div>
						<!-- 问卷右侧 end -->
					</div>
				</div>
			</div>


		</el-card>
	</div>
</template>

<script>
	// 二维码组件
	import VueQr from 'vue-qr'

	export default {
		name: 'FormList',
		components: { VueQr },
		created() {
			this.formList()
		},
		inject:['reload'],
		data() {
			return {
				activeIndex: '3',
				dialogVisible: false,
				FormList: [],
				textarea: '',
				list: [],
				Form: {
					headline: '',
					formId:'',
					sList: [],
					state:"",
				},
				dataObj: {
				  text: 'http://120.79.19.249/#/FillForm/{{Form.formId}}',
				  logo: require('../assets/logo.png')
				},
			}
		},

		methods: {
			handleSelect(key, keyPath) {
			        console.log(key, keyPath);
			      },
		    test(dataUrl, id) {
		        console.log(dataUrl)
		        console.log(id)
		    },
			gotoFillForm(formId) {
				
				if(formId==""){
					this.$alert("请选择要填写的表单!");
				}
				else if(formId!=null){
				
				window.location.href ='http://120.79.19.249/#/FillForm/'+formId;
				console.log(formId)
				 }
			},
			goStatisticsPage(){
				if(this.Form.formId==""){
					this.$alert("请选择要统计的表单!");
				}
				else if(this.Form.formId!=null){
							this.$router.push(
								{
									path:'/Statistics',
									name:'Statistics',
									params: { 
										formId:this.Form.formId
									}
								}
							)
							}				
						},
			async formList() {
				const {
					data: res
				} = await this.$http.get('getForms', this.FormList)
				//console.log(this.FormList)
				//console.log(res)
				this.FormList = res;
				//console.log(this.FormList[0].headline);						  
			},
			async handleSee(formId) {
				//console.log(formId);
				const {
					data: res
				} = await this.$http.get('getFormById?id=' + formId)
				this.Form = res;
				//console.log(this.Form);
				for (let i = 0; i < res.sList.length; i++) {
					//console.log(res.sList[i].type);
					this.addQuestionnaire(res.sList[i].type)
					//console.log(res.sList[i].type);
				}
				this.list=this.Form.sList;

			},
			async handleUpgrade(Form){
				if(Form.formId==""){
					this.$alert("请选择要修改的表单!");
				}
				else if(Form.formId!=null){
				this.Form.sList = this.list
				console.log(this.Form)
				const {
					data: res
				} = await this.$http.post('editForm', this.Form)
				this.$message.success('修改表单成功!')
				this.handleSee(this.Form.formId)
				this.formList()
				}
			},

			async handleDelete(formId,state) {
				console.log(formId);
				if(formId==""){
					this.$alert("请选择要删除的表单!");
				}
				else if(formId!=null){
				const {
					data: res
				} = await this.$http.delete('deleteForm?id=' + formId)
				this.reload();
				}
			},
			
			async onCollection(formId,state){
				console.log(formId);
				console.log(state);
				if(formId==""){
					this.$alert("请选择要收藏的表单!");
				}
				if(state==true){
					this.$alert("该表单已收藏!");
				}
				else if(formId!=null&&state==false){
				const {date:res}=await this.$http.get('collectForm?id=' + formId)
				this.$message.success('收藏表单成功!')
				}
				},
			
			addQuestionnaire(type, index, operation) {
				// 添加单选题
				if (type == 'singleChoice') {
					var singleChoice = {
						questionContent:'',
						
						options: [{
							optionContent:'选项1'
						}],
						type: 'singleChoice',
						sort: this.list.length + 1
					}
					// 在当前题下方添加
					if (index != undefined && undefined == operation) {
						this.list.splice(index + 1, 0, singleChoice)
					}
					// 复制题型
					else if (index != undefined && 'copy' == operation) {
						var copyChoice = {
							questionContent: this.list[index].questionContent,
							options: this.list[index].options.slice(0),
							type: type,
							sort: this.list.length + 1
						}
						this.list.splice(index + 1, 0, copyChoice)
					} else {
						this.list.push(singleChoice)
					}
				}
				//添加单选题 end
				// 添加多选题
				else if (type == 'mutipleChoice') {
					var mutipleChoice = {
						questionContent: '',
						options: [{
							optionContent: "选项1"
						}, {
							optionContent: "选项2"
						}],
						type: 'mutipleChoice',
						sort: this.list.length + 1
					}
					// 在当前题下方添加
					if (index != undefined && undefined == operation) {
						this.list.splice(index + 1, 0, mutipleChoice)
					}
					// 复制题型
					else if (index != undefined && 'copy' == operation) {
						var copyChoice = {
							questionContent: this.list[index].questionContent,
							options: this.list[index].options.slice(0),
							type: type,
							sort: this.list.length + 1
						}
						this.list.splice(index + 1, 0, copyChoice)
					} else {
						this.list.push(mutipleChoice)
					}
				}
				// 添加多选题 end

				// 添加简答题
				else if (type == 'scoring') {
					var scoring = {
						questionContent: '',
						options: [{
							optionContent: ""
						}],
						type: 'scoring',
						sort: this.list.length + 1
					}

					// 在当前题下方添加
					if (index != undefined && undefined == operation) {
						this.list.splice(index + 1, 0, scoring)
					}
					// 复制题型
					else if (index != undefined && 'copy' == operation) {
						var copyChoice = {
							questionContent: this.list[index].questionContent,
							options: '',
							type: type,
							sort: this.list.length + 1
						}
						this.list.splice(index + 1, 0, copyChoice)
					} else {
						this.list.push(scoring)
					}
				}

				// 添加简答题 end

			},
			//删除一题
			delQuestionnaire(id) {
				this.list.splice(id, 1)
			},

			//添加一项答案
			addAanwer(type, index, option) {
				var options = this.list[index].options.length + 1
				this.list[index].options.push({
					optionContent: "选项" + options
				})
			},

			//删除一项答案
			delAanwer(type, index, option) {
				if (this.list[index].options.length > 2) {
					this.list[index].options.splice(option, 1)
				} else {
					this.$message.error('至少留下两项哦！')
				}
			},
			handleClose(done) {
			        this.$confirm('确认关闭？')
			          .then(_ => {
			            done();
			          })
			          .catch(_ => {});
			      }
		},
	}
</script>

<style>
	.el-header {
	    background-color: #a9a9be;
	    color: #333;
	    line-height: 50px;
		padding: 0;
	  }
	.pathItem {
		float: left; 
		font-size: 1.3rem;
		list-style:none;
		margin:5px 5px;
		cursor: pointer;
	}
	h1, h2 {
		 /* color: #00557f; */
		 font-size: 1.3rem;
	  font-weight: normal; 
	}
	[v-cloak] {
		display: none;
	}

	body {
		margin: 0;
	}

	.flex-row {
		display: flex;
	}

	.flex-column {
		flex-direction: column;
	}

	.flex-1 {
		flex: 1;
	}

	.flex-middle {
		align-items: center;
	}

	.flex-align-items-center {
		align-items: center;
	}

	.flex-justify {
		justify-content: space-between;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.flex-center {
		justify-content: center;
	}

	.mt-3 {
		margin-top: 30px !important;
	}

	.mt-1 {
		margin-top: 10px !important;
	}

	.well-box {
		background: #fff;
		padding: 15px;
		min-height: 150px;
	}

	.content .content-box {
		padding: 15px;
		background-color: #fff;
		margin-bottom: 15px;
	}

	.block {
		display: block !important;
	}

	.relative {
		position: relative;
	}

	.pointer {
		cursor: pointer;
		margin: 5px;
	}

	.notopmargin {
		margin-top: 0 !important;
	}

	.f14 {
		font-size: 14px;
	}

	.f18 {
		font-size: 18px;
	}

	.f28 {
		font-size: 28px;
	}

	.btn {
		border: none;
		padding: 10px 25px;
	}

	.btn-bgWhite {
		border: 1px solid #999999;
		background: #fff;
		border-radius: 2px;
	}

	.btn-bgWhite:hover,
	.btn-bgBlue:hover,
	.btn-bgYello:hover {
		background: #333;
		color: #fff;
	}

	.btn-bgBlue {
		background: #3582f8;
		border-radius: 2px;
		color: #fff;
	}

	.btn-bgYello {
		background: #e7a42f;
		border-radius: 2px;
		color: #fff;
	}

	.text-right {
		text-align: right;
	}

	.text-left {
		text-align: left;
	}

	.form-control {
		/* height: 40px; */
		background: #ffffff;
		border: 1px solid #d8d8d8;
		border-radius: 3px;
		box-shadow: none;
		margin: 15px;
		padding: 5px;
	}

	input:focus {
		outline: none;
	}

	.input-group-fan .form-control {
		margin: 0;
		padding: 10px 15px;
	}

	.input-group-fan select {
		display: block;
		height: 40px;
		width: 330px;
		border: 1px solid #d8d8d8;
		padding: 0 10px;
		border-radius: 3px;
	}

	.input-group-fan select option {
		padding: 5px;
	}

	.input-group-fan label {
		font-size: 14px;
		color: #333333;
	}

	.input-group-fan {
		margin: 20px 0;
		width: 100%;
	}

	.input-group-fan input {
		float: none !important;
		width: 500px !important;
		display: block !important;
	}

	.questionnaire_null {
		height: 500px;
		border: 1px dashed #3582f8;
		border-radius: 3px;
		margin-top: 30px;
		font-size: 18px;
		color: #000000;
	}

	.btn-event {
		display: inline-block;
		width: 50px;
		margin: 15px;
		cursor: pointer;
	}

	.input-border {
		border: 1px dashed #eee;
		margin-bottom: 10px !important;
		padding: 5px;
		width: 500px;
	}

	.icon_score {
		color: #d8d8d8;
		font-size: 28px !important;
		margin-right: 15px;
	}
</style>
